<template>
	<view>
		<block v-for="(item,index) in projectList" :key='index'>
			<view @click="toProjectDetail(item,index)" class="project-swipe-contain-item" :class="opcity==index?'sysOpacity':''">
				<view class="swipe-contain-item-top">
					<view class="l">
						<image class="swipe-contain-item-pic" :src="item.photos[0]" mode=""></image>
					</view>
					<view class="swipe-contain-item-contain">
						<view class="swipe-contain-item-contain-title oneline">
							<image src="../../static/tj.png" mode="" v-if="item.topState==1"></image> {{item.projectName||item.project_name}}
						</view>
						<view class="swipe-contain-item-contain-text">{{processTypeStr(item)}}</view>
						<view class="swipe-contain-item-contain-text oneline">{{wordList(item)}}</view>
						<view v-if="isLine" class="swipe-contain-item-contain-text selfcolor oneline">{{wantList(item)}}</view>
					</view>
				</view>
				<view class="swipe-contain-item-bottom">
					<view class="swipe-contain-item-bottom-com">
						<image style="width: 30upx;height: 30upx;margin-right:13upx;" :src="base_url+'/img/wx/gkxcx/homecompany.jpg'"
						 mode=""></image>
						{{item.companyName||item.company_name}}
					</view>
					<view class="swipe-contain-item-bottom-seen">
						<!-- <text class="icon iconfont iconchakan-copy"></text> -->
						<image style="width: 20upx;height: 25upx;margin-right:21upx;vertical-align: middle;" :src="base_url+'/img/wx/gkxcx/p-loca.jpg'"
						 mode=""></image>
						{{item.provinceName||item.provinceLabel}}
					</view>
				</view>
			</view>
			<view class="project-seprate" v-if="projectList.length-1!=index"></view>
		</block>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import { baseUrl } from '@/utils/index.js';
	export default {
		props: ['projectList'],
		data() {
			return {
				base_url:baseUrl,
				// projectList:[],
				opcity: -1
			}
		},
		computed: {
			...mapState('userStore', ['isLine']),
			processTypeStr() {
				return projectInfo => {
					let composeStr = '';
					if (projectInfo.financingTypeStr) {
						composeStr = projectInfo.processTypeStr;
					}
					if (projectInfo.financingTypeStr) {
						composeStr += `(${projectInfo.financingTypeStr})`;
					}
					return composeStr;
				}
			},
			wordList() {
				return projectInfo => {
					if (projectInfo.words) {
						return projectInfo.words.join('｜');
					}
					return '';
				}
			},
			wantList() {
				return projectInfo => {
					if (projectInfo.yourWant) {
						return projectInfo.yourWant.join('、');
					}
					return '';
				}
			}

		},
		methods: {
			toProjectDetail(item, index) {
				this.opcity = index
				console.log('项目ID',item.projectId,item)
				let project_id = item.projectId ? item.projectId : item.project_id;
				uni.navigateTo({
					url: '/pages/project-detail/project-detail?scene=' + project_id
				});
			},
			resetOpcity(){
				let that = this
				setTimeout(function(){
					that.opcity = -1
				},1000)
			}
		},
	
	}
</script>

<style scoped>
	.project-swipe-contain-item {
		margin: 0upx 30upx;
		padding: 30upx 0upx 0;

	}

	.swipe-contain-item-top {
		display: flex;
		align-items: center;
	}
	.swipe-contain-item-top .l{
		display: flex;
		align-items: center;
	}
	.swipe-contain-item-pic {
		width: 239upx;
		height: 150upx;
		/* border: 1px solid #09BB07; */
		margin-right: 30upx;
		flex-shrink: 0;
		border-radius: 6upx;
		background-color: #E1E1E1;
	}

	.swipe-contain-item-contain {
		padding-bottom: 4upx;
		width: 430upx;
		display: flex;
		height: 150upx;
		flex-direction: column;
		justify-content: space-between;
		/* flex:1 */
	}

	.swipe-contain-item-contain-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		/* height: 42upx; */
		/* margin-top: -15upx; */
		color: rgba(34, 34, 34, 1);
	}

	.swipe-contain-item-contain-title image {
		width: 83upx;
		height: 30upx;
		margin-right: 10upx;
		vertical-align: -10%;
	}

	.swipe-contain-item-contain-text {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		/* height: 33upx; */
		color: rgba(83, 83, 83, 1);
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.swipe-contain-item-detail {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
		padding: 15upx 1upx 24upx 8upx;
		border-top: 1px solid #F2F2F2;
		margin-top: 20upx;
		height: 96upx;
	}

	.swiper-tip-contain {
		display: flex;
		justify-content: center;
		margin-top: 35upx;
	}

	.oneline {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.selfcolor {
		color: #DE5A02
	}

	.project-seprate {
		width: 100%;
		height: 12upx;
		background: rgba(245, 245, 245, 1);
	}

	.swipe-contain-item-bottom {
		display: flex;
		justify-content: space-between;
		margin-top: 22upx;
		margin-bottom: 20upx;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
	}

	.swipe-contain-item-bottom-seen {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4E4E4E;
		display: flex;
		align-items: center;
	}

	.swipe-contain-item-bottom-com>.icon {
		margin-right: 10upx;
	}

	.swipe-contain-item-bottom-com {
		width: 400upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(169, 169, 169, 1);
	}

	.swipe-contain-item-bottom-seen>.icon {
		/* vertical-align: middle; */
		margin-right: 10upx;
		margin-bottom: 4upx;
		/* margin-top: 4upx; */
	}
</style>
